<!--登录日志-->

<template>
  <div class="app-container">
    <div class="filter-container" style="display: flex; margin: 0 auto; justify-content: space-between;">
      <div>
        <el-input
          v-model="queryParams.userCode"
          placeholder="用户工号"
          clearable
          style="width: 160px;"
          class="filter-item split-item"
          @blur="event => inputValueTrim(event, queryParams, 'userCode')"
        />
        <el-input
          v-model="queryParams.userName"
          placeholder="用户名称"
          clearable
          style="width: 160px;"
          class="filter-item split-item"
          @blur="event => inputValueTrim(event, queryParams, 'userName')"
        />
        <el-date-picker
          v-model="queryParams.beginDate"
          type="date"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          placeholder="开始日期"
          class="filter-item split-item"
        />
        <span class="filter-item split-item">至</span>
        <el-date-picker
          v-model="queryParams.endDate"
          type="date"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          placeholder="截止日期"
          class="filter-item split-item"
        />
        <el-button
          v-waves
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          plain
          @click="handleFilter"
        >查询
        </el-button>
        <el-button
          v-waves
          class="filter-item"
          plain
          @click="resetQueryParams"
        >重置
        </el-button>
      </div>
      <div style="margin-right: 50px;" />
    </div>

    <!-- itemTable -->
    <el-table
      ref="itemTable"
      v-loading="itemListLoading"
      v-el-height-adaptive-table="{bottomOffset: 70}"
      row-key="id"
      :data="itemList"
      border
      fit
      highlight-current-row
      class="item-table"
      height="100px"
      :cell-style="{padding:'5px'}"
      :header-cell-style="{padding:'5px'}"
    >
      <el-table-column
        prop="userCode"
        header-align="center"
        width="120"
        align="center"
        label="学工号"
      />
      <el-table-column
        prop="tokenType.label"
        header-align="center"
        width="240"
        align="center"
        label="登录方式"
      />
      <el-table-column
        prop="operation"
        header-align="center"
        width="100"
        align="center"
        label="操作"
      />
      <el-table-column
        prop="visitorIp"
        header-align="center"
        label="访问IP"
        align="center"
        :show-overflow-tooltip="true"
      />

      <el-table-column
        prop="createTime"
        header-align="center"
        width="160"
        align="center"
        label="时间"
      />

    </el-table>

    <pagination
      :total="queryParams.total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="loadItemList"
    />

  </div>
</template>

<script>
import permission from '@/directive/permission/index.js'
import waves from '@/directive/waves'
import elHeightAdaptiveTable from '@/directive/el-table'
import dataApi from '@/api/sys/loginLog.js'
import commonApi from '@/api/sys/common.js'
import { resetObject } from '@/utils/index'
import Pagination from '@/components/Pagination'
import formMixin from '@/utils/mixins/formMixin'
import tagViewMixin from '@/utils/mixins/tagViewMixin'

let self

export default {
  name: 'SystemLoginLogList',
  components: { Pagination },
  directives: { permission, waves, elHeightAdaptiveTable },
  mixins: [tagViewMixin, formMixin],
  data() {
    return {
      tokenTypeList: [],
      itemList: [],
      itemListLoading: false,
      itemTableSelectedCount: 0,
      showEditDrawer: false,
      drawerCloseOnEsc: false,
      drawerWrapperClosable: false,
      queryParams: {
        userCode: undefined,
        userName: undefined,
        beginDate: undefined,
        endDate: undefined,
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      dataFormRule: {}
    }
  },
  computed: {},
  created(query) {
    self = this
    this.drawerCloseOnEsc = this.$appConfig.drawerCloseOnEsc
    this.drawerWrapperClosable = this.$appConfig.drawerWrapperClosable
    self.loadDependParams()
    self.loadItemList()
  },
  methods: {
    loadDependParams() {
      commonApi.fetchEnumList({ type: 'com.codol.zhty.modules.iam.enums.TokenType', includes: [] }).then(response => {
        const { list } = response.data
        this.tokenTypeList.splice(0, this.tokenTypeList.length, ...list)
      })
    },
    resetQueryParams() {
      resetObject(this.queryParams, undefined, ['pageNum', 'pageSize', 'total'])
      this.handleFilter()
    },
    handleFilter() {
      this.queryParams.pageNum = 1
      this.loadItemList()
    },
    loadItemList() {
      this.itemListLoading = true

      if (this.$refs.itemTable) {
        this.$refs.itemTable.clearSelection()
      }

      dataApi.fetchList(this.queryParams).then(response => {
        const { page } = response.data
        this.itemList.splice(0, this.itemList.length, ...page.records)
        this.queryParams.total = page.total
      }).finally(() => {
        this.itemListLoading = false
      })
    }
  }
}
</script>

<style scoped>

</style>
